<template>
	<div class="layout">
		<Layout :style="{minHeight: '100vh'}">
			<Header>
				<Menu name="11" mode="horizontal" theme="dark" active-name="1">
					<div class="layout-logo w-50">
						<!-- <img class="w-100 h-100 align-top" src="../assets/logo.png" /> -->
						<h4 class="text-light">欢迎来到兰鸟管理端</h4>
					</div>
					<div class="layout-nav">
						<Menu mode="horizontal" style="float: right;" theme="dark" active-name="1">
							<Submenu name="3">
								<template slot="title">
									<Icon type="ios-people" />
									<span>管理员</span>
								</template>
								<MenuItem name="3-2">
								<a @click="logout" href="javascript:void(0)" :class="'w-100 h-100'">退出登录</a>
								</MenuItem>
							</Submenu>
						</Menu>
					</div>
				</Menu>
			</Header>
			<Layout>
				<Sider hide-trigger :class="'bg-light'">
					<Menu active-name="1-2" theme="light" width="auto" :open-names="['1']">
						<Submenu v-for="(item, key) in currentUser.permissions" :id="key" :name="item.permissionId">
							<template slot="title">
								<Icon type="ios-navigate"></Icon>
								{{item.name}}
							</template>
							<MenuItem v-for="(subItem, index) in item.permissions" :name="subItem.permissionId"
								:to="subItem.path">
							<a>{{subItem.name}}</a>
							</MenuItem>
						</Submenu>
					</Menu>
				</Sider>
				<Layout>
					<Content :class="'m-2'">
						<router-tab :class="''" />
					</Content>
				</Layout>
			</Layout>
		</Layout>
	</div>
</template>

<script>
	import store from "../../common/store.js"
	export default {
		data() {
			return {
				currentUser: {
					account: "",
					name: "",
					permissions: [

						{
							permissionId: 1,
							name: "车辆管理",
							permissions: [{
									permissionId: 11,
									name: "车辆管理",
									path: "/car"
								},
								{
									permissionId: 12,
									name: "卖车管理",
									path: "/carSell"
								},
								{
									permissionId: 13,
									name: "买车管理",
									path: "/carBuy"
								},
								{
									permissionId: 14,
									name: "租车管理",
									path: "/carRental"
								},
								{
									permissionId: 15,
									name: "求租管理",
									path: "/carRent"
								}
							]
						},
						{
							permissionId: 2,
							name: "房产管理",
							permissions: [{
									permissionId: 21,
									name: "房子管理",
									path: "/house"
								},
								{
									permissionId: 22,
									name: "卖房管理",
									path: "/houseSell"
								},
								{
									permissionId: 23,
									name: "租房管理",
									path: "/houseLease"
								},
								{
									permissionId: 24,
									name: "买房管理",
									path: "/houseBuy"
								},
								{
									permissionId: 25,
									name: "求租管理",
									path: "/houseRent"
								},
							]
						},
						{
							permissionId: 3,
							name: "客户管理",
							permissions: [{
								permissionId: 31,
								name: "客户列表",
								path: "/order"
							}, ]
						},
						{
							permissionId: 4,
							name: "用户管理",
							permissions: [{
								permissionId: 41,
								name: "用户列表",
								path: "/user"
							}]
						},
						{
							permissionId: 5,
							name: "角色管理",
							permissions: [{
								permissionId: 51,
								name: "角色列表",
								path: "/role"
							}]
						},
						{
							permissionId: 6,
							name: "权限管理",
							permissions: [{
								permissionId: 61,
								name: "权限列表",
								path: "/permission"
							}]
						},
						{
							permissionId: 7,
							name: "订单类型价格",
							permissions: [{
								permissionId: 71,
								name: "订单类型价格",
								path: "/payCost"
							}]
						}
					]
				}

			};
		},
		methods: {
			logout: () => {
				store.commit("loginOut");
			}
		},
		// computed: {
		// 	// current: function() {
		// 	// 	console.log(store.state.currentUser);
		// 	// 	currentUser = store.getItem("LOGIN_INFO");
		// 	// 	store.local.getItem("LOGIN_INFO")
		// 	// 	return store.state.currentUser;
		// 	}
		// },
		created: function() {
			console.log(store.state.currentUser.account);
			this.currentUser.account = store.state.currentUser.account;
			this.currentUser.name = store.state.currentUser.name;

		}
	}
</script>

<style scoped>
	.layout {
		position: relative;
		border-radius: 4px;
		overflow: hidden;
	}

	.layout-logo {
		width: 100px;
		height: 30px;
		background: #5b6270;
		border-radius: 3px;
		float: left;
		position: relative;
		top: 15px;
		left: 20px;
	}

	.layout-nav {
		width: calc(100% - 100px);
		margin: 0 auto;
		margin-right: 20px;
	}
</style>
